<div [class.container]="portfolio">
<div id="grid" class="shop-left pt-35 tab-pane fade in active">
									<div class="shop-tab-area">
										<div class="row">
											<!-- Single Product Start -->
											<div class="col-md-4 col-sm-6" *ngFor="let productItem of productDatas">
												<div class="single-product style-two mb-50">
													<div class="single-img">
														<a><img [src]="productItem.url" alt="" /></a>
														<span class="pro-level" *ngIf="productItem.sale">Sale</span>
														<span class="pro-level" *ngIf="productItem.new">New</span>
														<div class="hover-content text-center">
															<ul>
																<li><a href="#" class="icon_refresh"></a></li>
																<li><a href="#" class="icon_cart_alt "></a></li>
																<li><a href="#" class="icon_heart_alt"></a></li>
																<li>
																	<a title="Quick View" data-toggle="modal" data-target="#productModal" class="icon_search"  (click)="showModal(productItem)"></a>
																</li>
															</ul>
														</div>
													</div>
													<div class="product-details mt-20">
														<h4><a (click)="goProcduct(productItem)">{{productItem.name}}</a><span>{{productItem.smallName}}</span></h4>
														<div class="rating-box">
															<i class="fa fa-star"></i>
															<i class="fa fa-star"></i>
															<i class="fa fa-star"></i>
															<i class="fa fa-star"></i>
															<i class="fa fa-star"></i>
														</div>
														<div class="price-box">
															<span class="old-price">{{productItem.oldPrice}}</span>
															<span class="new-price"> - {{productItem.newPrice}}</span>
														</div>
													</div>
												</div>
											</div>
											<!-- Single Product End -->
										</div>
									</div>
								</div>
								</div>
									<modal [modalData]="modalData" *ngIf="modalData" (colseFatherModal)="colseFatherModal()"></modal>
